
# Export an HTML Table to CSV or JSON in Chrome with Mr. Table

Mr. Table is a small Chrome extension I wrote at TYO Lab. It reads the tables on the page you're looking at and saves them as **CSV** or **JSON**. It handles normal HTML `<table>` tables out of the box, and "tables" built from `<div>` tags if you tell it which CSS selectors to use.

**The short version:**

1. Install [Mr. Table from the Chrome Web Store](https://chromewebstore.google.com/detail/lkpbjlipbgmdmbamoojnfakndomaicdm) and pin it to the toolbar.
2. Open the page with the table and click the Mr. Table icon.
3. Pick **CSV** or **JSON** under *Output Format*.
4. Click **Export All**. A window lists every table it found. Flick to the one you want and click **Download**.
5. If the page uses `<div>` tables, open **Advanced Options** first and set the five selectors (explained below).

I built it because data I needed for work was often only published as a web page table. One example from the original version of this post: the ASX code changes table, which I wanted for my algorithmic trading system.

## When to use it (and when not to)

There are other ways to get a table out of a web page. Pick the one that fits:

<Table data={{
  "headers": ["Method", "Good for", "Limits"],
  "rows": [
    ["Mr. Table (this post)", "Any table you can see in Chrome, including pages behind a login, pages built by JavaScript, and div tables", "One page at a time; div tables need selectors"],
    ["Select and copy-paste into Excel or Sheets", "One small, simple table", "Merged cells, links and line breaks often paste badly"],
    ["Google Sheets IMPORTHTML(url, \"table\", n)", "A public page you want to refresh in a sheet", "Only real table elements; no logins; no content loaded by JavaScript"],
    ["Excel: Data > From Web (Power Query)", "Repeatable imports into Excel", "Same as above: public pages, real table elements"],
    ["Code (see the end of this post)", "Many pages or a scheduled job", "You have to write and maintain it"]
  ]
}} />

## Install and pin it

Install it from the [Chrome Web Store](https://chromewebstore.google.com/detail/lkpbjlipbgmdmbamoojnfakndomaicdm) with **Add to Chrome**. Then open the puzzle-piece Extensions menu and pin Mr. Table so the icon stays on the toolbar. The icon looks like this: ![Mr. Table toolbar icon](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-24-13-04-21.png)

Clicking it opens this popup:

![Mr. Table popup with Output Format, Advanced Options, Export Selected and Export All](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-24-13-08-48.png)

<Table data={{
  "headers": ["Control", "What it does"],
  "rows": [
    ["Output Format", "CSV or JSON"],
    ["Advanced Options", "Shows the five selectors used to find tables, header cells, rows and cells"],
    ["Export Selected", "Exports only the table you've clicked in or selected text in"],
    ["Export All", "Finds every matching table on the page and shows them in a preview window"]
  ]
}} />

## Exporting a normal HTML table

A standard HTML table is built from these tags:

- `<table>` wraps the whole thing
- `<thead>` and `<tbody>` group the header and body (optional)
- `<tr>` is a row
- `<th>` is a header cell
- `<td>` is a data cell

For tables like that you don't need to change anything. These are the defaults under **Advanced Options**:

![Default selectors: table, tr, th, tr, td](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-22-17-09-55.png)

<Table data={{
  "headers": ["Selector", "Default", "Meaning"],
  "rows": [
    ["Table Selector", "table", "Each match is treated as one table"],
    ["Header Row Selector", "tr", "A row that contains header cells becomes the header"],
    ["Header Cell Selector", "th", "Header cells inside that row"],
    ["Data Row Selector", "tr", "A row that contains data cells becomes a data row"],
    ["Data Cell Selector", "td", "Data cells inside each row"]
  ]
}} />

Header and data rows can both be `tr` because the exporter only treats a row as a header if it contains header cells, and as a data row if it contains data cells. In the underlying table-exporter library this is literally `tr:has(th)` and `tr:has(td)`.

### Example: the ASX code changes table

The ASX publishes ticker code and name changes on its [ASX code changes page](https://www.asx.com.au/markets/market-resources/asx-codes-and-descriptors/asx-code-changes). With the default selectors, **Export All** found the tables on the page and showed each one in the preview window, with a **Download** button per table:

![Preview of an exported ASX code changes table showing As of, Old details and New details columns](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-24-14-32-57.png)

Two things to notice in that screenshot:

- **It found several tables.** The dots at the bottom are one per table. Use the arrows or dots to get to the one you want, then click **Download**. If you only want one table, it's quicker to click inside it on the page first and use **Export Selected**.
- **Grouped headers come out with blanks.** The ASX table has "Old details" and "New details" headings that each span two columns (code and name). The export has one header cell per heading, so two columns end up with no name. Rename them in your spreadsheet or code after export.

Here's the same thing on a Wikipedia article, in an earlier build of the extension. It found six tables on that page:

![Mr. Table preview of a Wikipedia filmography table with Year, Title, Role and Notes columns](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/tables.png)

## Exporting a div (CSS) table

Many sites don't use `<table>` at all. They build a grid out of `<div>` tags and use CSS to lay it out. The default selectors find nothing on those pages, so you have to tell Mr. Table what the table, rows and cells look like.

Here's a small div table rendered with CSS:

<div class="table">
  <div>
   <div class="table-header">
    <div class="table-header-cell">ID</div>
    <div class="table-header-cell">Name</div>
    <div class="table-header-cell">Age</div>
   </div>
  </div>
  <div>
   <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">John Doe</div>
    <div class="table-cell">23</div>
   </div>
  </div>
  <div>
   <div class="table-row">
    <div class="table-cell">2</div>
    <div class="table-cell">John Smith</div>
    <div class="table-cell">37</div>
   </div>
  </div>
</div>

And its HTML:

```html
<div class="table">
  <div>
    <div class="table-header">
      <div class="table-header-cell">ID</div>
      <div class="table-header-cell">Name</div>
      <div class="table-header-cell">Age</div>
    </div>
  </div>
  <div>
    <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">John Doe</div>
      <div class="table-cell">23</div>
    </div>
  </div>
  <div>
    <div class="table-row">
      <div class="table-cell">2</div>
      <div class="table-cell">John Smith</div>
      <div class="table-cell">37</div>
    </div>
  </div>
</div>
```

The selectors map straight onto the class names:

<Table data={{
  "headers": ["Selector", "Value"],
  "rows": [
    ["Table Selector", ".table"],
    ["Header Row Selector", ".table-header"],
    ["Header Cell Selector", ".table-header-cell"],
    ["Data Row Selector", ".table-row"],
    ["Data Cell Selector", ".table-cell"]
  ]
}} />

Enter them under **Advanced Options**:

![Advanced Options filled in with .table, .table-header, .table-header-cell, .table-row and .table-cell](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-25-12-48-04.png)

Then click **Export All**. The preview shows the two data rows:

![Preview of the exported div table showing rows 1 John Doe 23 and 2 John Smith 37](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/apps/mrtable/2022-03-25-12-48-49.png)

### Finding the selectors on a real site

Real sites rarely use class names as tidy as `.table-row`. To find them:

1. Right-click a cell in the table and choose **Inspect**. Chrome DevTools opens with that element highlighted.
2. Walk up the tree in the Elements panel. Note the class of the cell, the row that wraps the cells, and the element that wraps all the rows.
3. Prefer class names that describe the structure (`row`, `cell`, `item`) over long generated ones like `css-1x2ab3`. Generated classes can change on the next site deploy.
4. Check a selector before you use it. In the DevTools **Console**, run:

```js
document.querySelectorAll('.table-row').length
```

It should return the number of rows you can see. Zero means the selector is wrong. A much bigger number means it's matching more than the table.

A few CSS selector reminders:

- `.name` matches a class, `#name` an id, `div` a tag.
- `.row.header` (no space) matches an element with **both** classes.
- `.list .row` (with a space) matches `.row` elements anywhere inside `.list`.
- Lists work too. For a `<ul>` where each `<li>` is a row, use `li` as the row selector and whatever is inside it as the cell selector.

## Troubleshooting

**Nothing is found.** Either the selectors don't match (check them in the Console as above), or the table hasn't loaded yet. Scroll it into view or wait until the data appears, then run the export again. Mr. Table can only see what's on the page right now. For paginated or "load more" tables, it only gets the rows currently shown.

**No header row.** The header row selector has to match a row that contains the header cell selector. If the site uses the same class for header and data cells, set the header cell selector to something only the header has, or rename the columns after export.

**Columns are shifted in the CSV.** Check for commas inside cells, such as "1,234" or "Smith, John". If those cells aren't quoted in your file, a spreadsheet will split them into two columns. Export as JSON instead and the cell values stay intact.

**Export Selected doesn't pick the table you want.** Click on a cell inside the table you want (or select some of its text) before opening the popup.

**Respect the site.** Exporting a table you can already see is fine for personal use. Check the site's terms before reusing or republishing the data, and don't use a browser extension to bulk-scrape.

## Doing it in code instead

The extension is built on my table-exporter library, which you can also use in Node.js. The current version is [table-exporter-ts](https://github.com/tyolab/table-exporter-ts) (also on npm as `table-exporter-ts`). The older [table-exporter](https://github.com/tyolab/table-exporter) repo is deprecated. Both take the same idea, a table selector plus header, row and cell selectors, and return each table as `headers` and `rows`, ready to save as CSV or JSON.

If you want to go further with market data in code, see [building a trading gateway with the MT5 Python library](/blog/building-a-trading-gateway-with-mt5-python-library-part1/) for getting prices straight from a broker's API instead of from web pages.

## Feedback

Mr. Table is free. If a table on a public page won't export, let me know the URL:

- X: [Eric Tang](https://x.com/_e_tang)
- Email: [eric@tyo.com.au](mailto:eric@tyo.com.au)


b171529509cfb3bf4f203697aca5b9510583c6a8f9b1b63a6a8ed96c0a7d1909

Export a web page table to CSV or JSON with the Mr. Table Chrome extension: default selectors, Export Selected, div/CSS tables and troubleshooting.

How to use Mr. Table, the free Chrome extension I wrote, to export tables from any web page to CSV or JSON, including CSS tables built from div tags, with the selectors explained and fixes for common problems.

Tag: Data Export

Tag: Data Export

Export an HTML Table to CSV or JSON in Chrome with Mr. Table (Including div Tables)